<template>
  <div>
    <ul style="z-index:999;position: fixed;top: 0">
      <li><a @click="seeking(this.user.account)" v-if="user.position === '求职者'">求职</a></li>
      <li><a @click="this.$router.push('/employ')" v-if="user.position === 'HR'">招聘</a></li>
      <li><a @click="this.$router.push('/recommendation')" v-if="user.position === '求职者'">推荐</a></li>
      <li><a @click="this.$router.push('/record')" v-if="user.position === '求职者'">申请记录</a></li>
      <li><a @click="this.$router.push('/resumebox')" v-if="user.position === 'HR'">简历箱</a></li>
      <li><a @click="openDrawer(user.account)" v-if="user.position === '求职者'">我的简历</a></li>
      <li><a @click="this.$router.push('/Inbox')" v-if="user.position === '求职者'">收件箱</a></li>
      <li><a @click="this.$router.push('/EmpRecord')" v-if="user.position === 'HR'">发布历史</a></li>
      <li><a @click="userFeedback()">树叶社区</a></li>
    </ul>
  </div>
  <div>
    <el-drawer v-model="drawer" title="个人简历-属于自己的光辉时刻" :with-header="true">
      <el-radio-group v-model="size">
        <el-radio :label="'large'">放大</el-radio>
        <el-radio :label="'default'">默认</el-radio>
        <el-radio :label="'small'">缩小</el-radio>
      </el-radio-group>
      <el-descriptions
          title="我的简历--基本信息"
          :direction="'vertical'"
          :column="3"
          :size="size"
          border>
        <el-descriptions-item label="姓名" ><el-table :data="ResumedataTableData" table-layout="auto" style="width:auto"><el-table-column prop="name" ></el-table-column></el-table></el-descriptions-item>
        <el-descriptions-item label="性别"><el-table :data="ResumedataTableData" table-layout="auto" style="width:auto"><el-table-column prop="sex"></el-table-column></el-table></el-descriptions-item>
        <el-descriptions-item label="年龄"><el-table :data="ResumedataTableData" table-layout="auto" style="width:auto"><el-table-column prop="age"></el-table-column></el-table></el-descriptions-item>
        <el-descriptions-item label="电话号码"><el-table :data="ResumedataTableData" table-layout="auto" style="width:auto"><el-table-column prop="phone"></el-table-column></el-table></el-descriptions-item>
        <el-descriptions-item label="目前学历"><el-table :data="ResumedataTableData" table-layout="auto" style="width:auto"><el-table-column prop="position"></el-table-column></el-table></el-descriptions-item>
        <el-descriptions-item label="居住地"><el-table :data="ResumedataTableData" table-layout="auto" style="width:auto"><el-table-column prop="address"></el-table-column></el-table></el-descriptions-item>
        <el-descriptions-item label="求职意向"><el-table :data="ResumedataTableData" table-layout="auto" style="width:auto"><el-table-column prop="intendjob"></el-table-column></el-table></el-descriptions-item>
      </el-descriptions>
      <el-button type="primary" text @click="edit1(ResumedataTableData)">编辑</el-button>
      <el-dialog v-model="basicmessage" title="编辑基本信息" width="500" center>
        <el-form v-model="form" label-width="auto" style="max-width: 600px" >
          <el-form-item label="姓名">
            <el-input v-model="form.name"/>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form.sex">
              <el-radio value="男">男</el-radio>
              <el-radio value="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="form.age"/>
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input v-model="form.phone" />
          </el-form-item>
          <el-form-item label="目前学历">
            <el-select v-model="form.position" placeholder="请选择职业">
              <el-option label="专科" value="专科" />
              <el-option label="本科" value="本科" />
              <el-option label="硕士" value="硕士" />
              <el-option label="博士" value="博士" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-form-item>
          <el-form-item label="居住地">
            <el-input v-model="form.address" />
          </el-form-item>
          <el-form-item label="求职意向">
            <el-input v-model="form.intendjob" />
          </el-form-item>
          <el-button type="success" style="margin-left: 74%" @click="saveinformation(user.account)">保存以上信息</el-button>
        </el-form>
      </el-dialog>
      <!--        填写工作/实习经历弹出抽屉-->
      <el-descriptions
          :direction="'vertical'"
          :column="1"
          :size="size"
          border>
        <el-descriptions-item  label="工作/实习经历" span="3">
          <div class="demo-collapse">
            <el-collapse  @change="handleChange">
              <el-table :data="ResumedataTableData" table-layout="auto" style="width:auto">
                <el-table-column label="项目名称" prop="experiencename"/>
                <el-table-column label="项目经历介绍" prop="experience"/>
              </el-table>
            </el-collapse>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <el-button type="primary" text @click="edit2(ResumedataTableData)">编辑</el-button>
      <el-dialog v-model="editbasicmessage" width="500" >
        <el-form v-model="form" label-width="auto" style="max-width: 600px" >
          <el-form-item label="工作实习单位">
            <el-input style="width: auto" v-model="form.experiencename"/>
          </el-form-item>
          <el-input
              v-model="form.experience"
              style="width: 100%"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              placeholder="填写经历"
          />
          <br>
          <br>
          <el-button type="success" style="margin-left: 74%" @click="saveexperience(user.account)">保存以上信息</el-button>
        </el-form>
      </el-dialog>
      <el-descriptions
          :direction="'vertical'"
          :column="1"
          :size="size"
          border
      >
        <el-descriptions-item label="赛事获奖信息">
          <div>
            <el-table :data="ResumedataTableData" table-layout="auto" style="width:auto">
              <el-table-column label="比赛名称" prop="matchname"></el-table-column>
              <el-table-column label="比赛经历介绍" prop="matchintroduction"></el-table-column>
            </el-table>
          </div>
        </el-descriptions-item>
      </el-descriptions>

      <el-dialog v-model="editprojectmsg" title="请确保所填信息真实有效" width="500" center>
        <el-form v-model="form" label-width="auto" style="max-width: 600px" >
          <el-form-item label="赛事名称">
            <el-input style="width: 100px" v-model="form.matchname"/>
          </el-form-item>
          <el-input
              v-model="form.matchintroduction"
              style="width: 100%"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              placeholder="介绍比赛含金量以及在比赛中担当第几人"
          />
        </el-form>
        <br>
        <br>
        <el-button type="success" style="margin-left: 74%" @click="savematch(user.account)">保存以上信息</el-button>
      </el-dialog>
      <el-button type="primary" text @click="edit3(ResumedataTableData)">编辑</el-button>
      <!--        弹出获奖证书或者考级证书填写框-->
      <el-descriptions
          :direction="'vertical'"
          :column="1"
          :size="size"
          border
      >
        <el-descriptions-item label="获奖证书或者考级证书">
          <!--            上传照片功能实现组件-->
          <el-upload
              list-type="picture-card"
              action=''
              accept=".jpg, .png"
              :limit="1"
              :auto-upload="false"
              :on-change="getFile"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          <p>只能上传一张jpg/png格式的照片</p>
          <button @click="uplodecode(user.account)">点击上传</button>
          <button @click="deletecode(user.account)">删除照片</button>
          <el-image style="display: inline"  :src="this.imgResult12"></el-image>
        </el-descriptions-item>
      </el-descriptions>
      <!--        个人优势介绍框-->
      <el-descriptions
          :direction="'vertical'"
          :column="1"
          :size="size"
          border
      >
        <el-descriptions-item label="个人优势">
          <el-table :data="ResumedataTableData" table-layout="auto" style="width:auto">
            <el-table-column label="优势介绍" prop="advantage"></el-table-column>
          </el-table>
        </el-descriptions-item>
      </el-descriptions>
      <!--        弹出个人优势填写表单-->
      <el-dialog v-model="advantagedialog" title="请确保所填信息真实有效" width="500" center>
        <el-form  label-width="auto" style="max-width: 600px" >
          <el-input
              v-model="form.advantage"
              style="width: 100%"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              placeholder="简要介绍你的各方面优势"
          />
        </el-form>
        <br>
        <el-button type="success" style="margin-left: 74%" @click="saveadvantage(user.account)">保存以上信息</el-button>
      </el-dialog>
      <el-button type="primary" text @click="edit4(ResumedataTableData)">填写个人优势</el-button>

    </el-drawer>
  </div>
</template>

<style scoped>
ul {
  position: fixed;
  list-style-type: none;
  margin-left: 400px;
  padding: 0;
  overflow: hidden;
  background-color: #39494d;
}
li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover{
  color:#00e3e6 ;
}
</style>
<script>
import request from "@/Utils/request.js";
import { Plus} from "@element-plus/icons-vue";
export default {
  name:'UserMenu.vue',
  components: {Plus},
  data(){
    return{
      isButtonDisabled: true,
      user:localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{},
      ResumedataTableData:[],
      imgResult1:'',
      imgResult12:'',
      size: 'default',
      blockMargin: {
        marginTop: '28px',
      },
      drawer:false,
      basicmessage:false,
      editbasicmessage:false,
      editprojectmsg:false,
      advantagedialog:false,
      tableData:[],
      form:{
        name:'',
        address:'',
        position:'',
        age:'',
        sex:'',
        phone:'',
        intendjob:'',
        experiencename:'',
        experience:'',
        matchname:'',
        matchintroduction:'',
        advantage:'',
      }
    }
  },
  methods:{
    seeking(account){
      this.$router.push('/seekingjob')
      request.get(`/userresume/allresumemsg/${account}`).then(res=>{
        localStorage.setItem("usermsg",JSON.stringify(res))
      })
    },
    openDrawer(account,id) {
      this.drawer = true;
      request.post('/userresume/judgeaccount',{
        account:account
      }).then(res=>{
        if(res === 0){
          console.log("存在用户!")
        }else {
          console.log("没有此用户!")
        }
      }).catch(error=>{
        console.error("请求出错",error)
      })
      request.get(`/userresume/allresumemsg/${account}`).then(res=>{
        localStorage.setItem("usermsg",JSON.stringify(res))
        this.ResumedataTableData=res
      })
      request.get(`/user/image/${account}`).then(res=>{
        this.imgResult12=res.image
      });
    },
    userFeedback(){
      const { href } = this.$router.resolve({
        path: '/community'
      });
      window.open(href, '_blank');
    },
  }
}
</script>
